<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>Single page app using Polymer</title>
  <script src="/webcomponents.min.js"></script>
  <!-- vulcanized version of imported elements --
       see "elements.html" for unvulcanized list of imports. -->
  <link rel="import" href="vulcanized.html">
  <link rel="stylesheet" href="styles.css" shim-shadowdom>
</head>
<body unresolved fullbleed>

<template is="auto-binding" id="t">

<core-scaffold id="scaffold">

  <nav>
    <core-toolbar>
      <span>Single Page Polymer</span>
    </core-toolbar>
    <core-menu valueattr="hash" selected="{{route}}" on-core-select="{{menuItemSelected}}">
      <template repeat="{{page, i in pages}}">
        <paper-item hash="{{page.hash}}" noink>
          <core-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon>
          <a href="#{{page.hash}}">{{page.name}}</a>
        </paper-item>
      </template>
    </core-menu>
  </nav>

  <core-toolbar tool flex>
    <div flex></div>
    <core-icon-button icon="refresh"></core-icon-button>
    <core-icon-button icon="add"></core-icon-button>
  </core-toolbar>

  <div layout horizontal center-center fit>
    <core-animated-pages selected="{{route}}" valueattr="hash"
                         transitions="slide-from-right">
      <template repeat="{{page, i in pages}}">
        <section hash="{{page.hash}}" layout vertical center-center>
          <div>{{page.name}}</div>
        </section>
      </template>
    </core-animated-pages>
  </div>

</core-scaffold>

</template>

<script>
var template = document.querySelector('#t');

template.pages = [
  {name: 'Single', hash: 'one'},
  {name: 'page', hash: 'two'},
  {name: 'app', hash: 'three'},
  {name: 'using', hash: 'four'},
  {name: 'Polymer', hash: 'five'},
];

template.menuItemSelected = function(e, detail, sender) {
  if (detail.isSelected) {
    this.$ && this.$.scaffold.closeDrawer();
  }
};
</script>
</body>
</html>
